<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <div class="top-title">数据展示</div>
      <el-tabs v-model="tabActive" class="demo-tabs">
        <el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>
      <div class="top-content">
        <el-row :gutter="40">
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="item-left sle">
              <span class="left-title">访问总数</span>
              <div class="img-box">
                <img src="./images/book-sum.png" alt="" />
              </div>
              <span class="left-number">{{ state.num }}</span>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <div class="item-center">
              <div class="gitee-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_person.png" alt="" />
                </div>
                <span class="item-value">{{ state.userNum }}</span>
                <span class="traffic-name sle">总的用户量</span>
              </div>
              <div class="gitHub-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_team.png" alt="" />
                </div>
                <span class="item-value">{{ state.addUserNum }}</span>
                <span class="traffic-name sle">新增用户量</span>
              </div>
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/today.png" alt="" />
                </div>
                <span class="item-value">11</span>
                <span class="traffic-name sle">今日购物量</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/book_sum.png" alt="" />
                </div>
                <span class="item-value">5</span>
                <span class="traffic-name sle">昨日购物量</span>
              </div>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <div class="item-right">
              <div class="echarts-title">今日 / 昨日 购物量占比</div>
              <div class="book-echarts">
                <Pie ref="pieRef" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="card bottom-box">
      <div class="bottom-title">数据来源</div>
      <div class="bottom-tabs">
        <el-tabs v-model="tabActive" class="demo-tabs">
          <el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="curve-echarts">
        <Curve ref="curveRef" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataVisualize">
import { onMounted, reactive, ref } from "vue";
import Pie from "./components/pie.vue";
import Curve from "./components/curve.vue";
import { getVisitCount } from "@/api/modules/home";
import { UserList } from "@/api/modules/wxuser";
const state = reactive({
  num: null,
  addNum: null,
  userNum: null,
  addUserNum: null
});
const tabActive = ref(1);
const tab = [
  { label: "未来7日", name: 1 },
  { label: "近七日", name: 2 },
  { label: "近一月", name: 3 },
  { label: "近三月", name: 4 },
  { label: "近半年", name: 5 },
  { label: "近一年", name: 6 }
];
const visitCount = async () => {
  const res = await getVisitCount("miniapp");
  state.num = res.data;
};
onMounted(() => {
  visitCount();
  fetchTodayUserCount();
});
async function fetchTodayUserCount() {
  const res: any = await UserList();
  if (res.code === "200" && res.data) {
    const todayStr = new Date().toISOString().slice(0, 10);
    const todayCount = res.data.filter((user: any) => user.createdTime.slice(0, 10) === todayStr).length;
    state.addUserNum = todayCount;
    state.userNum = res.data.length;
    console.log("今日新增用户数:", todayCount);
  } else {
    console.error("接口返回错误", res.data.msg);
  }
}
</script>

<style scoped lang="scss">
@import "./index";
</style>
